<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>背景图固定的滚动视差</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <style type="text/css">
        section {
            width: 100%;
            min-height: 300px;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            background-attachment: fixed;
            text-align: center;
            color: #fff;
            padding: 0 100px;
        }

        .gap {
            width: 70px;
            background-color: #ccc;
            height: 3px;
            margin: 40px auto;
        }

        footer {
            background-color: #090909;
            color: #fff;
            padding: 0 100px;
            margin-top: 100px;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">滚动视差</a>
        </div>
    </div>
</nav>
<p class="gap">&nbsp;</p>
<section style="background-image: url(./img/background1.jpg)">
    <br>
    <br>
    <br>
    <br>
    <h2>Lorem ipsum dolor sit amtque aut dolorem est eveniet ex impedit</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum modi praesentium provident
        reiciendis rerum voluptas voluptatum! Animi assumenda dolores ipsa, magni molestias odio,
        pariatur quaerat rem repellendus rerum sequi, totam!</p>
    <br>
</section>
<p class="gap">&nbsp;</p>
<section style="background-image: url(./img/background2.jpg)">
    <br>
    <br>
    <br>
    <br>
    <h2>Lorem ipsum dolor sit amtque aut dolorem est eveniet ex impedit</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum modi praesentium provident
        reiciendis rerum voluptas voluptatum! Animi assumenda dolores ipsa, magni molestias odio,
        pariatur quaerat rem repellendus rerum sequi, totam!</p>
    <br>
</section>
<p class="gap">&nbsp;</p>
<section style="background-image: url(./img/background3.jpg)">
    <br>
    <br>
    <br>
    <br>
    <h2>Lorem ipsum dolor sit amtque aut dolorem est eveniet ex impedit</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum modi praesentium provident
        reiciendis rerum voluptas voluptatum! Animi assumenda dolores ipsa, magni molestias odio,
        pariatur quaerat rem repellendus rerum sequi, totam!</p>
    <br>
</section>
<p class="gap">&nbsp;</p>
<footer>
    <br>
    <br>
    <br>
    <br>
    <h2>Lorem ipsum dolor sit amtque aut dolorem est eveniet ex impedit</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum modi praesentium provident
        reiciendis rerum voluptas voluptatum! Animi assumenda dolores ipsa, magni molestias odio,
        pariatur quaerat rem repellendus rerum sequi, totam!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum modi praesentium provident
        reiciendis rerum voluptas voluptatum! Animi assumenda dolores ipsa, magni molestias odio,
        pariatur quaerat rem repellendus rerum sequi, totam!</p>
    <br>
    <br>
    <br>
</footer>
</body>
</html>